<template>
	<view class="content">
		<canvas canvas-id="hoCanvas" style="width:100%;height:1000upx;"></canvas>
		<button type="primary" @tap="savePoster()">保存海报</button>
		<label>保存海报后可分享到朋友圈</label>
	</view>
</template>

<script>
import myShare from '@/components/xyz-share/xyz-share.vue';
import comm from '../../common/helpers.js'
export default {
	components: { myShare },
	data() {
		return {
			downloadPosterBg: '',
			downloadHeaderImage: '',
			downloadQRImage: '',
			data: [
				{
					posterBackground: 'https://zhanbu.nomeis.cn/upload/page_resource/bg_not_kapai.jpg',
					posterQRImage: 'https://zhanbu.nomeis.cn/upload/page_resource/gh_4f2ea597d0ff_258.jpg'
				}
			],
			showPosterImage: true,
			postUrl: '',
			posterHeight: 0,
			posterWidth: 0,
			avatarPadding: 0, //距离边界
			avatarRadiu: 0, //头像半径
			textScale: 0, //文字比例
			rand_text:''
		};
	},
	onLoad() {
		let that = this;
		uni.getSystemInfo({
			success: res => {
				that.posterWidth = Math.round(res.screenWidth * 1.0); // 0.68是我的canvas占屏幕宽的百分比
				that.posterHeight = Math.round((that.posterWidth * 1920) / 1080); // 1920/1080是UI的宽高比，由此得出需要的canvas高
				that.avatarPadding = Math.round((that.posterWidth * 20) / 375); //也可以根据UI图，按比例计算得出其他需要绘制的图片文字等位置
				that.avatarRadiu = Math.round((that.posterWidth * 25) / 375);
				that.textScale = Math.round(that.posterWidth / 375);
			}
		});
		
		
		let downloadPosterBg = uni.getStorageSync('downloadPosterBg')
		let downloadQRImage = uni.getStorageSync('downloadQRImage')
		// 获取分享图片信息
		let promise1 = new Promise(function(resolve, reject) {
			uni.getImageInfo({
				src: downloadPosterBg,
				success: function(res) {
					resolve(res);
				}
			});
		});
		//获取二维码
		let promise3 = new Promise(function(resolve, reject) {
			uni.getImageInfo({
				src: downloadQRImage,
				success: function(res) {
					resolve(res);
				}
			});
		});
					
		Promise.all([promise1, promise3]).then(res => {
			uni.showLoading({
				title: '分享图片生成中...',
				icon: 'loading',
				duration: 1000
			});
					
			/* 图片获取成功才执行后续代码 */
			var ctx = uni.createCanvasContext('hoCanvas');
			// 开始绘制
			ctx.beginPath();
			// 列表商品都有分享朋友圈功能, 需要多次调用绘制, 每次需先清除画布重新绘制
			// 清除矩形区域
			ctx.clearRect(0, 0, that.posterWidth, that.posterHeight);
			// 重新填充, 不填充无法清除画布
			// ctx.fillRect(0, 0, 400, 667); (无法清除画布看情况添加)
			// 开始画
			ctx.beginPath();
			// 填充白色
			ctx.setFillStyle('#fff');
			// 填充进矩形框
			ctx.fillRect(0, 0, that.posterWidth, that.posterHeight);
			// 背景图
			ctx.drawImage(res[0].path, 0, 0, that.posterWidth - 18, that.posterHeight / 1.4);
			// 二维码
			ctx.drawImage(res[1].path, that.posterWidth / 1.4, that.posterHeight / 30, that.posterWidth / 5, that.posterHeight / 9);
			// 画头像圆
			// ctx.arc(364, 110, 30, 0, Math.PI * 2, false);
			// 切割圆, 调用fillRect后,模拟器显示切割不成功,
			// ctx.clip();
			// 头像
			// ctx.drawImage(res[1].path, 335, 80, 60, 60);
			// 恢复之前保存的上下文(清除画布后，文字不显示)
			ctx.restore();
			// 文字位置
			// ctx.setTextAlign('left');
			// 文字颜色
			// ctx.setFillStyle('#666');
			// 文字大小
			// ctx.setFontSize(that.textScale * 20);
			// 填充文字
			// ctx.setTextAlign('left');
			// ctx.setFillStyle('#000000');
			// ctx.fillText('吉塞普占卜', that.posterWidth / 375*138, that.posterWidth / 375*238 )
			// ctx.setFontSize(that.textScale * 18);
			// ctx.setTextAlign('left');
			// ctx.setFillStyle('#000000');
			// ctx.fillText('2019年6月13日', that.posterWidth / 375 * 134, that.posterWidth / 375 * 450)
			// ctx.setFontSize(24);
			// ctx.fillText('¥9.80', 20, 530);
			// 绘制路径的边框(头像黑框)
			// ctx.stroke();
			// 绘制到画布中，绘制成功掉生成海报图
			ctx.draw();
			
		}); 
	},
	onShow() {
	},
	methods: {
		savePoster: function() {
			let that = this;
			setTimeout(function() {
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: that.posterWidth - 18,
					height: that.posterHeight / 1.4,
					destWidth: that.posterWidth - 18,
					destHeight: that.posterHeight / 1.4,
					canvasId: 'hoCanvas',
					success: function(res) {
						that.postUrl = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: that.postUrl,
							success: res => {
								console.log(res);
							}
						});
						uni.hideLoading();
					},
					fail: function(res) {}
				});
			}, 500);
		}
	}
};
</script>

<style lang="scss">
.content {
	width: 100%;
	height: 100%;
	background-color: white;
	position: absolute;
	display: flex;

	label{
		text-align:center;
		font-size:11pt;
		padding:10upx 0upx;
		margin-bottom: 30upx;
	}

	rich-text {
		width: 100%;
		word-wrap: break-word;
		word-break: break-all;
		overflow: hidden;
		margin: auto;
		top: 0;
		font-size: 9pt;
		z-index: 555;
		color: #FE3E36;
		position: absolute;
		display:flex;
		justify-content:center;
		padding-top:300upx;	

	}
}
</style>
